import React from 'react';
import { useNavigate } from 'react-router-dom';
import './Profile.css';

export default function Profile() {
  // 模拟用户数据，实际应用中应该从状态管理或API获取
  const userInfo = {
    name: '管理员',
    email: 'admin@example.com',
    role: '管理员',
    registrationDate: '2023-01-01'
  };

  const navigate = useNavigate();

  const handleLogout = () => {
    // 模拟退出登录逻辑
    console.log('退出登录');
    // 退出后跳转到登录页
    navigate('/login');
  };

  return (
    <div className="profile-container">
      <h1>个人信息</h1>
      <div className="profile-card">
        <div className="profile-header">
          <div className="avatar">
            <span>{userInfo.name.charAt(0)}</span>
          </div>
          <h2>{userInfo.name}</h2>
        </div>
        <div className="profile-details">
          <p><strong>邮箱:</strong> {userInfo.email}</p>
          <p><strong>角色:</strong> {userInfo.role}</p>
          <p><strong>注册日期:</strong> {userInfo.registrationDate}</p>
        </div>
        <button className="logout-button" onClick={handleLogout}>
          退出登录
        </button>
      </div>
    </div>
  );
}